<template lang="pug">
  div.box
    h2 班级管理
    div.c
      div.grade_list.grade.mr16
        div.grade_list_item(v-for="(it,idx) in areaClassList" :key="idx" v-if="it.className!=='早教'" :style="{background:it.bac}")
          div.grade_list_item_title {{it.className}}
          div.grade_list_item_content
            img(:src="it.src")
            div.p25(style="display: flex;justify-content: space-between;")
              div
                span.grade_list_item_content_num {{it.classCount}}
                span （个）
              div.ml16
                span.grade_list_item_content_num {{it.childrenCount}}
                span （个）
      .echartBox#classesEchartsBox(style="height: 272px;width:272px")
</template>
<script>
const color = ['#FBB624', '#1890FF', '#58A5FF', '#FB4B24', '#909399']
import echartMixin from '@/mixins/echarts'
import { dashboardByArea } from '@/api/dashboard'

export default {
  name: 'StaticsEcharts',
  mixins: [echartMixin],
  data () {
    return {
      imgs: {
        '新生儿班': 'xseb',
        '乳儿班': 'reb',
        '托小班': 'txb',
        '托中班': 'tzb',
        '托大班': 'tdb',
        '毕业班': 'byb'
      },
      echartsId: 'classesEchartsBox',
      areaClassList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      dashboardByArea().then(res => {
        console.log(res)
        this.areaClassList = res.areaClassList

        const chartData = []
        let classesCount = 0
        this.areaClassList.forEach((x, index) => {
          chartData.push({
            value: x.classCount,
            name: x.className,
            itemStyle: {
              color: color[index]
            }
          })
          classesCount += x.classCount
        })

        for (let index = 0; index < this.areaClassList.length; index++) {
          if (this.areaClassList[index]['className'] === '新生儿班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#FEFBEE', src: require('@/assets/xseb.png') })
          }

          if (this.areaClassList[index]['className'] === '乳儿班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#FEF9F9', src: require('@/assets/reb.png') })
          }

          if (this.areaClassList[index]['className'] === '托小班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#F2FEFE', src: require('@/assets/txb.png') })
          }

          if (this.areaClassList[index]['className'] === '托大班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#FAFAFE', src: require('@/assets/tdb.png') })
          }

          if (this.areaClassList[index]['className'] === '托中班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#F9FEEE', src: require('@/assets/tzb.png') })
          }

          if (this.areaClassList[index]['className'] === '毕业班') {
            this.$set(this.areaClassList, index, { ...this.areaClassList[index], bac: '#FFF9FE', src: require('@/assets/byb.png') })
          }
        }
        console.log(chartData)
        this.getEcharts(chartData, classesCount)
      })
    },
    getEcharts (values, classesCount) {
      console.log(values)
      const options = {
        backgroundColor: '#E7EDFB',
        title: {
          text: classesCount,
          subtext: '班级总数',
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 10
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '班级情况',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            labelLine: {
              length: 5
            },
            label: {
              show: false
            },
            data: values
          }
        ]
      }
      this.$_chartMixin_init(options)
    }
  }
}
</script>
<style lang="scss" scoped>
  .box {
    border: 1px solid #EBEBEE;
    border-radius: 8px !important;
    padding: 24px;
  }
  h2{
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 0;
    padding-bottom: 24px;
  }
  .c{
    display: flex;
    justify-content: space-between;
    ::v-deep {
      .echartBox div {
        border-radius: 272px !important;
      }
    }
  }
  .grade_list {
    flex: 1;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-row-gap: 16px;
     grid-column-gap: 16px;
   }

  .grade_list_item {
    padding: 16px;
    background: #FEFBEE;
    border-radius: 8px;
  }

  .grade_list_item_title {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .grade_list_item_content {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      margin-bottom: 10px;
      width: 64px;
      height: 64px;
    }

    div {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-family: Source Han Sans SC, Source Han Sans SC;
      text-align: left;
      font-style: normal;
      text-transform: none;

      span {
        font-weight: 400;
        font-size: 12px;
        color: #000000;
      }
    }
  }

  .grade_list_item_content_num {
    font-weight: 500 !important;
    font-size: 24px !important;
  }
  .ml16 {
     margin-left: 16px;
  }
</style>
